<style lang="less" scoped>
@import "../assets/css/config.less";
* {
  margin: 0;
  padding: 0;
}
#project {
  .flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  height: 100vh;
  padding-top: 58px;
  min-width: 1210px;
  .header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .body {
    height: 100%;
    display: flex;
    .menu {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 0 30px 30px;
      div {
        background-color: #f7f6f4;
      }
    }
    .project-content {
      background-color: #fff;
      text-align: left;
      padding: 2rem 60px 4rem 20px;
      flex: 4;
      overflow: auto;
      .card {
        position: relative;
        padding: 10px 20px;
        border: none;
        margin: 0;
        .content {
          font-size: 16px;
        }
        .title {
          line-height: 30px;
        }
        &:hover {
          border: 1px solid #ccc;
          box-shadow: 0 1px 2px 1px #ccc;
          border-radius: 4px;
          margin: -1px;
        }
        .show-more {
          display: none;
          width: 30px;
          height: 30px;
          border: @border;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          cursor: pointer;
        }
        &:hover .show-more {
          display: flex;
          &:hover .icon{
            color: @color2;
          }
          .icon {
            color: rgb(248, 168, 103);
          }
        }
      }
      
    }
  }

  .masker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    .focus-point {
      // height: 100%;
      // min-width: 1000px;
      width: 970px;
      background-color: #fbfbfb;
      opacity: 1;
      margin: 80px auto;
      border-radius: 4px;
      text-align: left;
      padding: 1px 0;
      .focus-card {
        padding: 1rem;
        position: relative;
        border: 1px solid #dddddd;
        background-color: #fff;
        border-radius: 4px;
        margin: 20px 25px;
        z-index: 110;
        .text {
          font-size: .875rem;
          padding: .3125rem;
        }
      }
    }

    .focus-content {
      font-size: 1rem;
    }

    .focus-header {
      margin-bottom: .4rem;
      font-weight: 600;
      font-size: 1rem;
    }

    .lead-button-list {
      position: fixed;
      width: 80px;
      min-height: 100px;
      top: 81px;
      right: 50%;
      transform: translateX(580px);
      .lead-button-list_son {
        margin-bottom: .625rem;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
      }
      .lead-button_divider {
        height: 10px;
        background-color: rgba(0, 0, 0, 0.8);
      }
    }
    .lead-button {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #eeeeee;
      font-size: 14px;
      line-height: 40px;
      cursor: pointer;
    }
  }

  
  .item-header {
    background-color: #f6f5f4;
    padding: 18px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 4px 8px -2px #678981;
    .note-icon {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  
}

</style>

<template>
  <div id="project">
    <div class="header">
      <myheader></myheader>
    </div>
    <div class="body">
      <div class="menu">
        <div style="margin-top: 2rem">
          <my-own-menu
            :menu="project"
            @handleMenuClick="handleMenuClick"
          ></my-own-menu>
        </div>
      </div>
      <div
        class="project-content"
      >
        <div v-if="processList.length===0&&userGroup!=='0'">
          <p class="no-content">这里暂时没有步骤，点击下方按钮进行添加吧~</p>
          <div class="flex-center">
            <button class="confirm" @click="toAddStep(0)">添加步骤</button>
          </div>
        </div>
        <div v-if="processList.length===0&&userGroup==='0'" class="no-content">这里暂时没有步骤哦~</div>
        <div
          class="card"
          title="双击空白部分可以显示更多哦~"
          v-for="(item, index) in processList"
          :key="item._id"
          @dblclick="showMore(index)"
        >
          <div class="flex-space-between">
            <h2 class="title">{{ index + 1 }}、{{item.title}}</h2>
            <div class="show-more" @click="showMore(index)" title="单击图标可以显示更多内容哦~"> 
              <icon class="el-icon-menu icon" size="18"/>
            </div>
          </div>
          <div class="content" v-html="item.content"></div>
        </div>
      
      </div>
    </div>
    <div v-if="showMoreFlag" class="masker">
      <div class="word-point focus-point">
        <div class="focus-card">
          <div class="focus-header">{{this.focusingIndex + 1}}、{{this.processList[this.focusingIndex].title}}</div>
          <div class="focus-content">
            <div v-html="this.processList[this.focusingIndex].content"></div>
          </div>
        </div>
        <div id="comment" class="item-header">
          <!-- <img class="note-icon" src="../../static/pic/note.png"/> -->
          <span>问题</span>
          <div class="add-note-button" @click="addComment">
            <img class="note-icon" src="../../static/pic/note.png" />
            回答问题
          </div>
        </div>
        <div class="focus-card">
          <div class="text">
            1、 这是问题题干
          </div>
          <div ref="editor"></div>
        </div>
      </div>
      <div class="lead-button-list">
        <div class="lead-button-list_son">
          <div class="lead-button" style="color: #d30000" @click="exitFocus">
            退出
          </div>
          <div class="lead-button" @click="scrollTo('word-point')">知识</div>
          <div class="lead-button" @click="scrollTo('note')">笔记</div>
          <div class="lead-button" @click="scrollTo('comment')">提问</div>
          <div class="lead-button" @click="scrollTo('doexersize')">做题</div>
        </div>
        <div class="lead-button-list_son" v-if="userGroup !== '0'">
          <div class="lead-button">出题</div>
          <div class="lead-button" style="font-size: 12px;color: #d30000" @click="deleteStep">删除步骤</div>
          <div class="lead-button" style="font-size: 12px" @click="toAddStep(1)" title="在该步骤之前添加新的步骤">添加步骤(前)</div>
          <div class="lead-button" style="font-size: 12px" @click="toAddStep(2)" title="在该步骤之后添加新的步骤">添加步骤(后)</div>
          <div class="lead-button" style="font-size: 12px" @click="toEditStep">编辑步骤</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myheader from '../components/header.vue'
import myOwnMenu from "../components/myOwnMenu.vue";
import {get_projectById, get_projectProcess, delete_process} from '../api/api'

import E from "wangeditor";

export default {
  name: 'project',
  data() {
    return {
      showMoreFlag: false,
      project: null,
      userGroup: '',
      processList: [],
      focusingIndex: -1, // 正在聚焦的步骤索引
    }
  },
  components: {
    myheader,
    "my-own-menu": myOwnMenu,
  },
  watch: {
    '$route.params.menu': function() {
      this.getProcesses();
      this.exitFocus();
    }
  },
  created() {
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    this.getProject();
    this.getProcesses()
  },
  mounted() {
    
  },
  methods: {
    getProcesses() {
      const menu = this.$route.params.menu.split(',')
      get_projectProcess({
        project_id: menu[0],
        process: menu[2]
      }).then(res => {
        this.processList = res.data
      }).catch(err => {
        this.$message.error('获取步骤信息出错')
        console.error('获取步骤信息出错: ' + err)
      })
    },
    getProject() {
      const id = this.$route.params.menu.split(',')[0];
      get_projectById({id}).then(res => {
        if(res.state) {
          this.project = res.data.map(ele => {
            var obj = {};
            obj.title = ele.project_name;
            obj.subtitle = ele.processes;
            return obj
          })
        } else {
          this.$message.error('获取项目信息失败');
        }
      }).catch(err => {
        this.$message.error('获取项目信息出错');
        console.error('获取项目信息出错:' + err);
      })
    },
    deleteStep() {
      delete_process({
        id: this.processList[this.focusingIndex]._id
      }).then(res => {
        if(res.state) {
          this.$message.success('删除步骤成功');
          this.getProcesses();
          this.exitFocus();
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error('删除步骤出错');
        console.log('删除步骤出错：' + err);
      })
    },
    handleMenuClick(data) {
      var menu = this.$route.params.menu.split(',')[0] + ',' + data.index + ',' + data.key
      this.$router.push({
        name: 'project',
        params: {
          menu
        }
      })
    },
    toAddStep(data) {
      if(data === 0) {
        var menu = this.$route.params.menu;
        this.$router.push({
          name: 'addProjectStep',
          params: {
            menu: menu + ',' + 0
          }
        })
        return
      } 
      var seq = this.processList[this.focusingIndex].sequence;
      if (data === 2) {
        seq = Number(seq) + 1;
      }
      var menu = this.$route.params.menu;
      this.$router.push({
        name: 'addProjectStep',
        params: {
          menu: menu + ',' + seq
        }
      })
    },
    toEditStep() {
      var menu = this.$route.params.menu + ',' + this.processList[this.focusingIndex].sequence;
      this.$router.push({
        name: 'editProjectStep',
        params: {
          menu
        }
      })
    },
    addComment() {

    },
    showMore(index) {
      this.showMoreFlag = true;
      this.focusingIndex = index;
      const that = this;
    this.$nextTick(() => {
      
      const editor = this.editor = new E(this.$refs.editor);

      editor.customConfig.onchange = html => {
        that.editorContent = html;
      };

      var url = "";
      if (process.env.NODE_ENV === "development") {
        url = "http://localhost:8080/api/uploadImg";
      } else if (process.env.NODE_ENV === "production") {
        url = "https://www.ourspark.org/api/uploadImg";
      }
      editor.customConfig.uploadImgServer = url; // 上传图片到服务器

      
      editor.customConfig.zIndex = 0;
      editor.create();
      editor.txt.html('请输入你的答案');
      
    })

    },
    exitFocus() {
      this.showMoreFlag = false;
      this.focusingIndex = -1;
    },
    scrollTo() {

    }
  }
}
</script>